<script setup>
import { ref, onMounted } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const records = ref([])
const loading = ref(false)

const fetchRecords = async () => {
  try {
    loading.value = true
    const { data } = await request.get('/api/health-records')
    records.value = data
  } catch (error) {
    ElMessage.error(error.message || '获取记录失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchRecords()
})
</script>

<template>
  <page-container title="健康记录">
    <el-button type="primary" class="mb-4">
      添加记录
    </el-button>
    
    <el-table v-loading="loading" :data="records">
      <el-table-column prop="recordDate" label="记录日期" width="120" />
      <el-table-column prop="weight" label="体重(kg)" width="100" />
      <el-table-column prop="bloodPressureHigh" label="血压(高)" width="100" />
      <el-table-column prop="bloodPressureLow" label="血压(低)" width="100" />
      <el-table-column prop="heartRate" label="心率" width="100" />
      <el-table-column prop="symptoms" label="症状" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ row }">
          <el-button link type="primary" size="small">查看</el-button>
          <el-button link type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </page-container>
</template>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style> 